import { merge } from 'lodash-es';
import store from '@/store/index.js';

let sideTheme = store.state.global.setting.sideTheme ?? 'theme-dark';

const options = {
  grid: {
    bottom: '10%',
    top: '20%',
    left: '2%',
    right: '2%',
    containLabel: true,
  },
  tooltip: {
    trigger: 'axis',
    confine: true,
    borderWidth: '0', //边框宽度设置1
    axisPointer: {
      type: 'shadow',
      shadowStyle: { color: 'rgba(220, 220, 220, 0.1)' },
    },
  },
  legend: {
    show: true,
    x: 'center',
    y: 'top',
    padding: [20, 25],
    icon: 'rect',
    itemWidth: 10,
    itemHeight: 4,
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: 1,
      axisLine: {
        show: true,
        lineStyle: {
          color: '#283147',
        },
      },
      axisLabel: {
        show: true,
        color: '#7f889a',
        fontSize: 12,
      },
      splitLine: { show: false },
      axisTick: { show: false },
    },
  ],
  yAxis: [
    {
      type: 'value',
      name: '',
      nameTextStyle: { color: '#7f889a', align: 'left' },
      padding: 5,
      alignTicks: true,
      // max: 1000,
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(127, 136, 154, 0.5)',
          type: 'dashed',
        },
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#283147',
        },
      },
      axisLabel: {
        show: true,
        margin: 10,
        color: '#7f889a',
      },
      axisTick: { show: false },
    },
  ],
  dataZoom: [
    {
      type: 'inside',
      show: true,
      // filterMode: 'filter',
      xAxisIndex: [0],
      start: 0,
      end: 100,
    },
    {
      type: 'slider',
      show: true,
      // filterMode: 'filter',
      xAxisIndex: [0],
      start: 0,
      end: 100,
      height: 15,
      bottom: 5,
      borderColor: 'transparent',
      backgroundColor: 'rgba(0,0,0,0)',
      brushSelect: false,
    },
  ],
};

store.watch(
  state => state.global.setting.sideTheme,
  newVal => (sideTheme = newVal),
);
const getCurrentThemeStyle = sideTheme => {
  return {
    tooltip: {
      backgroundColor: sideTheme === 'theme-dark' ? 'rgba(47,59,96,0.94)' : '#fff',
      borderColor: sideTheme === 'theme-dark' ? '#245288' : '#d5d5d5', //设置边框颜色
      textStyle: { color: sideTheme === 'theme-dark' ? '#f5f5f5' : '#303133' },
    },
    legend: {
      textStyle: { color: sideTheme === 'theme-dark' ? '#c0c4cc' : '#606266' },
    },
    title: {
      textStyle: { color: sideTheme === 'theme-dark' ? '#f5f5f5' : '#303133' },
    },
  };
};

export default () => merge({}, options, getCurrentThemeStyle(sideTheme));
